import { onUnmounted, ref } from 'vue'

export function useDefer() {
  let max = 60 // 最大帧数 超过最大帧数的不显示了
  const frameCount = ref(0) // 记录当前帧数
  let rafId

  updateFrameCount()

  onUnmounted(() => {
    cancelAnimationFrame(rafId)
  })

  // 更新帧数
  function updateFrameCount() {
    rafId = requestAnimationFrame(() => {
      frameCount.value++
      // 到达最大帧数则停止
      if (frameCount.value > max) {
        return
      }
      updateFrameCount()
    })
  }

  // 重点 根据当前帧数判断元素是否可渲染
  function defer(n) {
    return frameCount.value >= n
  }
  return defer
}
